<template>
  <div class="head">
    <div class="container">
      <a href="javascript: void(0)" @click="$router.push('/')" class='logo'>
        <img src="../../assets/res/img/LOGO.png">
      </a>
      <span class="fr">
        <a href="javascript: void(0)" class="back" @click="cancel()">取消</a>
        <a href="javascript: void(0)" class="back on" @click="submit()">确认</a>
        <a @click="$router.push('/')" href="javascript: void(0)" class="photo"><img :src="me.sysUser.avatar"></a>
      </span>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: ['formData'],
  watch: {
    formData: {
      handler: function (obj) {
        this.change += 1
      },
      deep: true
    }
  },
  computed: {
    ...mapState({
      me: state => state.me
    })
  },
  data () {
    return {
      change: 0
    }
  },
  methods: {
    submit () {
      this.$emit('submitFn')
    },
    cancel () {
      if (this.change > 0) {
        window.layui.layer.open({
          content: '信息尚未保存，确定要离开吗？',
          btn: ['离开', '取消'],
          yes: (index, layero) => {
            window.layui.layer.close(index)
            this.$emit('cancelFn')
          },
          isOutAnim: false
        })
      } else {
        this.$emit('cancelFn')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.head{
  width: 100%;
  height: 66px;
  background: #fff;
  line-height: 66px;
}
.head .logo{
  width: 14.1%;
  display: inline-block;
}
.head .logo img{
  width: 100%;
}
.head .back{
  height: 36px;
  line-height: 36px;
  border: 1px solid #808080;
  display: inline-block;
  border-radius: 18px;
  color: #808080;
  margin-right: 16px;
  padding: 0 17px;
}
.head .back:hover{
  border: 1px solid #f23e3e;
  color: #fff;
  background: #f23e3e;
}
.head .on{
  border: 1px solid #f23e3e;
  color: #f23e3e;
}
.head .photo{
  display: inline-block;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  overflow: hidden;
  vertical-align: middle;
}
.head .photo img{
  width: 100%;
  height: 100%;
  float: left;
}
</style>
